<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    @close="onDialogClose"
    v-loading="loading">
    <!-- :action="uploadAction" 
    :headers="uploadHeaders" -->
    <div class="upload-message">
      {{ message }}
    </div>
    <el-upload
      ref="upload"
      :action="''"
      :http-request="upload"
      :headers="uploadHeaders"
      list-type="picture-card"
      :multiple="multiple"
      name="img"
      :before-upload="beforeUpload"
      :on-success="onUploadSuccess"
      :on-error="onUploadError"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/util'
import { imageUpload, imageUploadUrl } from '@/api/public'

export default {
  props: {
    multiple: Boolean
  },
  data() {
    return {
      uploadAction: imageUploadUrl,
      uploadHeaders: {},
      title: '上传图片',
      loading: false,
      submitLoading: false,
      dialogVisible: false,
      message: null,
      fileList: [],
      fileLists: [],
      filesUpload: []
    }
  },
  created() {
    this.uploadHeaders = {
      Authorization: 'Bearer ' + getToken()
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    close() {
      this.dialogVisible = false
    },
    onSubmit() {
      this.filesUpload = this.fileList.map(file => {
        if (file.status === "success" && file.response && file.response.path) {
          return file
        }
      })
      this.$emit('onSave', this.filesUpload)
    },
    // 图片上传
    upload(param) {
      var form = new FormData()
      form.append(param.filename, param.file)
      imageUpload(form, param.onProgress).then(res => {
        if (res.status === 'success') {
          param.onSuccess(res.data)
        } else {
          param.onError(res.message)
        }
      })
      .catch(err => {
        param.onError(err.message)
      })
    },
    beforeUpload(file) {
      if (!/\.(jpg|jpeg|png|webp|JPG|PNG|WEBP)$/.test(file.name)) {
        this.$message.error('上传图片只能是、jpg、png、jpeg格式!')
        return false
      }
      if (file.size / 1024 / 1024 > 2) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    onUploadSuccess(response, file, fileList) {
      this.fileList = fileList
    },
    // onUploadChange(file, fileList) {
    //   // this.fileLists = fileList
    // },
    onUploadError(err, file) {
      this.message = `${file.name} ${err}`
    },
    handleClose() {
      this.dialogVisible = false
    },
    onDialogClose() {
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.message = null
      // this.fileLists.map(file => {
      //   this.$refs.upload.abort(file)
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-message {
  padding: 10px 5px;
  color: #F56C6C;
}
</style>